<template>
  <div class="search-item-wrapper">
    <div class="one-info" >
      <div class="avarat">
        <avaratImg :age="data?.age" :customerSex="data?.gender"></avaratImg>
      </div>
      <div class="person-info" @click="searchItem(data)">
        <div style="padding-top: 5px;">
          <div class="name">{{data?.name}}</div>
          <div class="sex">
            <el-icon v-if="data?.gender === '男'" class="male-color"><male /></el-icon>
            <el-icon v-if="data?.gender === '女'" class=" female-color"><female /></el-icon>
            
          </div>
          
        </div>
        <div>
          <div class="medical-num">
            <el-icon><add-location /></el-icon>
            <span>{{data?.historySickNum || '暂无'}}</span> 
          </div>
          <div class="phone" style="padding-left: 5px">
            <el-icon><postcard /></el-icon>
            <span class="bg-blue"> {{data?.age + '岁'}} </span><span>{{'(' + getBirthDay(data?.birthDate || '')  + ')' || '暂无' }}</span>
          </div>
        </div>
        <div>
          <div class="phone">
            <el-icon><phone /></el-icon>
            <span>{{data?.mobileFirstNumStr || '暂无' }}</span> 
          </div>
        </div>
        <div>
          <div v-if="data?.lastSickRecordSubCompanyName">
              <span>{{'【' + data?.lastSickRecordSubCompanyName + '】'}}</span>
            </div>
          <div>
            <span v-if="data?.lastSickRecordTime">{{getBirthDay(data?.lastSickRecordTime)}}</span><span v-if="data?.lastRecordDetailDoctorName">{{'(' + data?.lastRecordDetailDoctorName + ')'}}</span>
          </div>
        </div>
        
        
      </div>
      <div v-if="showRegister" class="icon" @click="goRegister(data)">
        <abbr title="挂号" style="text-decoration: none">
          <i class="iconfont icon-jinru_huabanfuben"></i>
        </abbr>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { AddLocation,Phone, Postcard, Male, Female, } from '@element-plus/icons-vue'
import { defineComponent, PropType, ref } from 'vue'
import { getBirthDay } from "../../usefn/getBirthday"
import avaratImg from "../../components/avatarImg/avatarImg.vue"

export type SearchItemType = {
  id: number,
  age: number,
  gender: string,
  name: string,
  historySickNum: string,
  birthDate: string,
  mobileFirstNumStr: string,
  lastSickRecordSubCompanyName: string | null,
  lastSickRecordTime: string | null,
  lastRecordDetailDoctorName: string | null,

}
export default defineComponent({
  name: 'SearchItem',
  props: {
    searchData: {
      type: Object as PropType<SearchItemType>
    },
    showRegister: {
      type: Boolean,
      default: true
    }
  },
  components: {
    avaratImg,
    Phone, Postcard, Male, Female, AddLocation
  },
  emits: ['goRegister', 'searchItem'],
  setup(props, ctx) {
    const data = ref(props.searchData as SearchItemType)
    const goRegister = (d:SearchItemType) => {
      ctx.emit('goRegister', d)
    }
    const searchItem = (d:SearchItemType) => {
      ctx.emit('searchItem', d)
    }
    return {
      data,
      getBirthDay,
      goRegister,
      searchItem
    }
  }
})
</script>

<style lang="scss" scoped>
.search-item-wrapper {
  .one-info {
    height: 100%;
    display: flex;
    border-bottom: 1px solid #e4e5e7;
    .avarat {
      padding: 5px;

      .icon {
        width: 24px;
        height: 24px;
        padding: 5px 0px 0px 10px;
      }
    }

    .person-info {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex: 1;
      cursor: pointer;

      & > div {
        display: flex;
      }

      .name {
        font-weight: 600;
      }
      .sex {
        width: 20px;
        height: 20px;
        background: #409eff;
        border-radius: 50%;
        text-align: center;
        & > i {
          color: white;
        }
      }
      

      .medical-num {
        display: flex;
      }

      .phone {
        display: flex;
        align-items: center;
        justify-content: center;

        .bg-blue {
          background-color: #67c23a;
          border-radius: 4px;
          color: #fff;
          padding: 2px 3px;
          margin: 0 3px;
          font-size: 12px;
        }
      }
    }

    .icon {
      font-size: 16px;
      text-align: right;
      
      padding-top: 5px;
      
      & > abbr > .icon-jinru_huabanfuben:before {
        color: $primaryText;
        cursor: pointer;
      }
    }

    .icon:hover {
      & > abbr > .icon-jinru_huabanfuben:before {
        color: $mainColor;
        font-weight: 600;
      }
      
    }
  }

  .one-info:hover {
    background-color: #f5f6f7;
    .icon {
      color: $mainColor;
    }
  }
}
</style>